import React from 'react';
import { snippets } from './EventMock';
import Editor from './Editor';

export default class Right extends React.Component {
  render() {
    const { selectId, setEditor, codeBlock, onValueChange } = this.props;
    const snippet = snippets.find(s => s.id === selectId);
    const code = codeBlock || `/* 
  请在此处直接键入JavaScript代码
*/
`;

    return (
      <div className='right'>
        {
          selectId &&
          <div className='fn-config'>
            <div className='example'>
              <div className='title'>函数示例</div>
              <div className='content'>
                <div className='text' dangerouslySetInnerHTML={{ __html: snippet.example }}>
                </div>
              </div>
            </div>
          </div>
        }
        <div className='script-code'>
          <Editor setEditor={setEditor} onValueChange={onValueChange} value={code} selectId={selectId} />
        </div>
      </div>
    );
  }
}